<template>
    <div class="classified_data">
        <ul>
            <li v-for="classData in classDatas" :key="classData">
                <span class="classified_data_title">{{ classData.className }}</span>
                <div class="classified_sum">
                    <span>总填报数</span>
                    <h2>{{ classData.count }}</h2>
                </div>
                <div class="classified_count">
                    <p class="Success">通过：{{ classData.adopt }}</p>
                    <p class="Reject">驳回：{{ classData.reject }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'classified_data',
        data() {
            return {
                classDatas: []
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/classifiedData')
                .then(response=>{
                    this.classDatas = response.data.data
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .classified_data{
        position:absolute;
        top: 900px;
        left: 50px;
    }
    .classified_data ul{
        list-style: none;
        color: #FFF;
    }
    .classified_data ul li{
        float: left;
        text-align: left;
        margin-right: 20px;
        border-bottom: 1px dashed #135074;
        padding-bottom: 10px;
    }
    .classified_data_title{
        display: block;
        width: 200px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        text-align: left;
        text-indent: 1em;
        color: #00ffff;
        background: url(../../assets/title_bg.png)
    }
    .classified_sum{
        display: inline-block;
        margin: 20px 0 0 10px;
        text-align: left;
    }
    .classified_sum span{
        font-size: 12px;
    }
    .classified_sum h2{
        color: #ffc000;
        font-size: 20px;
        font-family: LCDfont;
        margin-top: 10px;
    }
    .classified_count{
        margin-left: 10px;
        display: inline-block;
        font-size: 12px;
        line-height: 24px;
    }
    .Success{
        color: #3ff402;
    }
    .Reject{
        color: #ff3000;
    }
    @font-face
    {
        font-family: LCDfont;
        src: url(../../assets/fonts/LCD.ttf)
    }
</style>